<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    请选择城市：
    <select id="provence">
        <option value="">请选择</option>
        <option value="0">浙江省</option>
        <option value="1">湖北省</option>
        <option value="2">广东省</option>
    </select>

    <select id="city">
    </select>
    <script>
        /*
            2个需求：
                1. 选择对应的省份的时候，输出该option标签的value属性值
                2. 根据选择的省份显示对应的城市
     */
        const selectObj = document.querySelector("#provence");
        const cityObj = document.querySelector("#city");
        console.dir(selectObj);
        console.log(selectObj);

        /* 
            准备基础数据：
                浙江省[0]
                湖北省[1]
                广东省[2]
         */
        const zhejiangCity0 = ["杭州", "温州"];
        const hubeiCity1 = ["武汉", "荆州", "黄石"];
        const gdCity2 = ["深圳", "惠州", "中山", "东莞"];

        // 将数据放入二维数组
        const initCityData = [["杭州", "温州"], ["武汉", "荆州", "黄石"], ["深圳", "惠州", "中山", "东莞"]];

        // 当改变选项时触发事件
        const options = selectObj.options;
        selectObj.addEventListener("change", function () {
            /* 
                根据选择不同的省份，获取对应的城市
             */
            // 初始化
            cityObj.innerHTML = "<option value=''>请选择</option>";
            const provinceValue = options[selectObj.selectedIndex].value;

            for (const item of initCityData[provinceValue]) {
                const optionObj = document.createElement("option");
                optionObj.text = item;
                cityObj.appendChild(optionObj);
            }
        });


    </script>
</body>

</html>